<template>
	<headerSwiperVue :barHeight="barHeight" :backShow="true" :swiperImg="swiperImg" :swiperHeight="650">
	</headerSwiperVue>
	<view class="equipDetailPage">
		<priceCardVue :equipData="equipDetailData"></priceCardVue>
		<serviceCardVue></serviceCardVue>
		<DetailsImageVue :shopData="equipDetailData"></DetailsImageVue>
	</view>
	<footerNavVue :equipData="equipDetailData"></footerNavVue>
</template>

<script setup>
	import headerSwiperVue from '@/components/headerSwiper.vue';
	import priceCardVue from './components/priceCard.vue';
	import serviceCardVue from './components/serviceCard.vue';
	import DetailsImageVue from './components/DetailsImage.vue';
	import footerNavVue from './components/footerNav.vue';

	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		equipShopDetail
	} from '@/config/API/equip.js'

	const swiperImg = ref([
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg'
	])
	const equipDetailData = ref([])
	onLoad(async (options) => {
		console.log('接收的装备商品id', options.equip_id);
		try {
			const equipDetailRes = await equipShopDetail(options.equip_id);
			equipDetailData.value = equipDetailRes.data;
			console.log('装备商品详情', equipDetailData.value);
			swiperImg.value = equipDetailData.value[0].equips_carousel_img
			console.log('swiperImg.value', swiperImg.value);
		} catch (error) {
			console.error('获取环线详情数据出错：', error);
		}
	});
</script>

<style lang="scss" scoped>
	.equipDetailPage {
		width: 100%;
		min-height: calc(100vh - 820rpx);
		padding: 20rpx 0;
		background-color: #f5f6f7;
	}
</style>